<template>
  <div class="mfw-header">
    <div class="header-wrap">
        <div class="head-logo">
          <a href="https://www.mafengwo.cn/" class="mfw-logo">
          <img src="./images/header-small-sprites3.png" alt=""></a>
        </div>
        <ul class="head-nav">
          <li>
            <a href="#">首页</a>
          </li>
          <li>
            <a href="#">目的地</a>
          </li>
          <li>
            <a href="#">旅游攻略</a>
          </li>
          <li>
            <a href="#">
              <span>去旅行</span>
              <i></i>
            </a>
            <div class="dropdown-menu">
              <ul>
                <li>
                  <a href="#">当地游</a>
                </li>
                <li>
                  <a href="#">自由行</a>
                </li>
                <li>
                  <a href="#">跟团游</a>
                </li>
            </ul>
            </div>
          </li>
          <li class="mfw-jipiao">
            <a href="#">机票</a> 
          </li>
          <li>
            <a href="#">订酒店</a>
          </li>
          <li>
            <a href="#">社区</a>
          </li>
          <li>
            <a href="#">APP</a>
          </li>
          <li class="mfwlxz-logo">
            <a href="#">
              <img src="./images/mfwlxz.png" alt="">
            </a>
          </li>
          <li class="aixin-logo">
            <a href="#">
              <img src="./images/aixin.png" alt="">
              无障碍
              </a>
          </li>
        </ul>
        <div class="head-search"></div>
        <div class="page-block">
          <div class="login-out">
            <a href="#" class="weibo-login"></a>
            <a href="#" class="qq-login"></a>
            <a href="#" class="weixin-login"></a>
            <a href="#" class="denglu">登录</a>
            <span class="split">|</span>
            <a href="#" class="zhuce">注册</a>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHeader",
};
</script>


<style>
.mfw-header {
  font-size: 12px;
  height: 58px;
  width: 1120px;
  margin: 0 auto;
}

.head-logo {
  float: left;
  width: 136px;
  height: 35px;
  overflow: hidden;
  padding: 10px 0;
  
}

.mfw-logo {
  height: 35px;
  width: 136px;
  background: url(./images/header-sprites15.png);
}

.head-nav {
  position: relative;
  line-height: 58px;
  font-size: 14px;
  margin: 0px;
  padding: 0px;
  list-style: none;
  padding: 0 10px 0 25px;
}

.head-nav-active a {
  background-color: #ff9d00;
  color: #fff!important;
  text-decoration: none;
}

.head-nav li {
  padding: 0 16px;
  height: 58px;
  float: left;
}

.head-nav li:hover {
  border-bottom: 3px solid #ff9d00;
  cursor: pointer; 
}

.head-nav li a:hover {
  color: #ff9d00;
}

.head-nav li a {
  color: #333;
  text-decoration: none;
}

.mfwzx-logo {
  background: url(./images/header-sprites15.png) no-repeat center;
  background-size: 75px 30px;
}

.mfw-jipiao::after {
  content: '特价';
  display: block;
  position: absolute;
  top: 9px;
  right: 616px;
  z-index: 3;
  padding: 0 4px;
  border-radius: 4px 0 4px 0;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: -webkit-linear-gradient(135deg,rgba(255,74,74,1) 0,rgba(255,115,115,1) 100%);
}

.mfwlxz-logo {
  width: 75px;
  height: 58px;
}

.mfwlxz-logo img {
  width: 100%;
  vertical-align: middle;
}

.aixin-logo {
  width: 62px;
  height: 58px;
  font-size: 12px;
}

.aixin-logo img {
  height: 12px;
  width: 12px;
}

.page-block {
display: block;
}

.login-out {
  display: block;
  width: 184px;
  float: right;
  text-align: right;
  height: 26px;
  line-height: 26px;
  padding: 16px 0;
}

.login-out .weibo-login {
  display: inline-block;
  margin-right: 6px;
  width: 26px;
  height: 26px;
  background-image: url(./images/header-sprites15.png);
  background-position: 0 -50px!important;
  overflow: hidden;
  vertical-align: -7px;
}

.login-out .qq-login {
  display: inline-block;
  margin-right: 6px;
  width: 26px;
  height: 26px;
  background-image: url(./images/header-sprites15.png);
  background-position: -30px -50px;
  overflow: hidden;
  vertical-align: -7px;
}

.weixin-login {
  display: inline-block;
  margin-right: 6px;
  width: 26px;
  height: 26px;
  background-image: url(./images/header-sprites15.png);
  background-position: -30px -165px!important;
  overflow: hidden;
  vertical-align: -7px;
}

.denglu {
  font-size: 14px;
  color:#ff9d00 ;
  text-decoration: none;
}

.zhuce {
  font-size: 14px;
  color:#ff9d00 ;
  text-decoration: none;
}

.split {
  display: inline-block;
  margin: 0 10px;
  width: 1px;
  height: 14px;
  background-color: #c9c9c9;
  overflow: hidden;
  vertical-align: -2px;
}

.dropdown-menu {
  background-color: rgba(255,255,255,.95);
  width: 140px;
  border-color: #eaeaea;
  display: none;
  z-index: 1;
  top: auto;
  right: auto; 
}

.dropdown-menu ul {
  display: left;
  background-color: #ff9d00;
  margin-bottom: 10px;
}

.dropdown-menu li {
  list-style: none;
}
</style>